import React, { useState } from 'react';
import './Customsize.scss';
import { Select } from 'antd';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import PCend from '../PCend/PCend'
import Mobileterminal from '../Mobileterminal/Mobileterminal'
import Print from '../Print/Print'
import Collectingscenes7 from '../../../assets/images/Collectingscenes/7.webp'
const Customsize: React.FC = () => {
    const [showOverlay, setShowOverlay] = useState(false);
    const renderScenes = Array(15).fill(null).map((_, index) => (
        <li>
            <img src={Collectingscenes7} alt="" />
            <div className='Solartermelements'>
                <h4>公众号首图</h4>
                <p>900px x 383px</p>
            </div>
            <div className='overlay2'>
                <img src="https://beta.chuangkit.com/distsaas/img/favorite-active.680145be.svg" alt="" className='img' />
                <img src="https://pub-cdn-oss.chuangkit.com/designKind/502?v=1726647366269&imageMogr2%2Fformat%2Fwebp" alt="" className='img1' />
                <img src="https://beta.chuangkit.com/distsaas/img/search-template-icon.d572a3bc.svg" alt="" className='img2' />
                <div className='overlay2left'></div>
                <div className='overlay2right'></div>
                <div className='overlay2right1'></div>
            </div>
        </li>
    ));
    const onChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    const [keys, setKeys] = useState('1')
    const onChange1 = (key: string) => {
        console.log(key);
        setKeys(key)
    };
    const onSearch = (value: string) => {
        console.log('search:', value);
    };
    const handleToggleOverlay = () => {
        setShowOverlay(!showOverlay);
    };

    const handleCloseOverlay = (event: React.MouseEvent) => {
        // 确保点击的是遮罩层本身，而不是其子元素
        if (event.target === event.currentTarget) {
            setShowOverlay(false);
        }
    };
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: 'PC端',
        },
        {
            key: '2',
            label: '移动端',
        },
        {
            key: '3',
            label: '印刷',
        }
    ];
    return (
        <div className='Customsize' onClick={handleToggleOverlay}>
            <p>自定义尺寸</p>
            {showOverlay && (
                <div className='overlay1' onClick={handleCloseOverlay}>
                    <div className='overlay-content1' onClick={(event) => event.stopPropagation()}>
                        <h3><span>自定义尺寸</span><b onClick={handleToggleOverlay}>X</b></h3>
                        <div className='inp111'>
                            <input type="text" placeholder='宽' className='input111'/>&emsp; X &emsp;<input type="text" placeholder='高' className='input111'/>&emsp;
                            <Select
                                showSearch
                                placeholder="PX"
                                optionFilterProp="label"
                                onChange={onChange}
                                onSearch={onSearch}
                                options={[
                                    {
                                        value: 'jack',
                                        label: 'Jack',
                                    },
                                    {
                                        value: 'lucy',
                                        label: 'Lucy',
                                    },
                                    {
                                        value: 'tom',
                                        label: 'Tom',
                                    },
                                ]}
                            />&emsp;
                        </div>
                        <div className="button">
                            <p>创建设计</p>
                        </div><br /><br /><br />

                        <Tabs defaultActiveKey="1" items={items} onChange={onChange1} />
                        <div className="Customsizebottom">
                            <div>
                                {keys === '1' ? <div className="main">
                                    <PCend />
                                </div> : ''}
                            </div>
                            <div>
                                {keys === '2' ? <div className="main">
                                    <Mobileterminal />
                                </div> : ''}
                            </div>
                            <div>
                                {keys === '3' ? <div className="main">
                                    <Print />
                                </div> : ''}
                            </div>
                        </div>
                        <div className="CommonScenarios">
                            <h3>常用场景</h3>
                            <div className="biographicalnotes">
                                <ul className='biographicalnotesul'>
                                    {
                                        renderScenes
                                    }
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Customsize;
